<template>
  <a-table :data-source="data" :columns="columns">
    <!--下面这整个div都是设置每一列搜索的样式图标-->
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <!-- 这里的slot是filter的插槽,column是当前列的配置,slot-scope直接照抄即可 -->
      <a-input
        v-ant-ref="c => searchInput = c"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        style="width: 188px; margin-bottom: 8px; display: block;"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm)"
      />
      <!-- v-ant-ref是固定写法，将表单输入的值传递给searchInput,selectedKeys是数组，value每次绑定的都是他的第一个值 -->
      <!--@change和@pressEnter是Input组件的自带方法，请查看Input组件内容-->
      <!--@change方法是实时改变要查询的selectedKeys的值，@pressEnter是按下enter直接查询的方法-->
      <a-button
        type="primary"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px"
        @click="() => handleSearch(selectedKeys, confirm)"
      >Search
      </a-button>
      <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)"
      >Reset
      </a-button>
    </div>
    <!--这里专门配置搜索按钮的样式，可以修改type的值为你想要的图标，也可以修改style，改变搜索前和搜索后的图标样式-->
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? 'red' : undefined }"
    />
    <!--修改匹配到的数据样式-->
    <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
          v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
        >
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight"
          >{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
      <template v-else>{{ text }}</template>
    </template>
  </a-table>
</template>

<script>
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park'
  }
]

export default {
  data () {
    return {
      data,
      searchText: '',
      searchInput: null,
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          // 这里的三个插槽，分别是搜索按钮插槽，定义搜索按钮样式插槽，和搜索之后的数据插槽
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          //这里才是确定筛选的运行函数
          onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
          //自定义筛选菜单可见变化时调用
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        }
      ]
    }
  },
  methods: {
    handleSearch (selectedKeys, confirm) {
      confirm() // confirm会关闭搜索框
      console.log(selectedKeys) // 会打印出你在搜索框中输入的值
      this.searchText = selectedKeys[0]
    },

    handleReset (clearFilters) {
      clearFilters() // => 这里面也有调用confirm方法关闭对话框  
      this.searchText = ''
    }
  }
}
</script>